<template>
	<view class="container">
		<view class="item">
			<view class="top">
				<view>{{item.childName}}</view>
				<view>{{item.situation}}</view>
			</view>
			<view class="line"></view>
			<view class="">
				<view v-for="(medicines, medicinesIndex) in item.medicines">
					<view class="info">
						{{ medicines.name }} | {{ medicines.way }} | {{ medicines.dailyTimes }}次 | 每次{{ medicines.quotaPerTime }}{{ medicines.unit }}
					</view>
					<view class="info">
						{{ medicines.daytimeList }}
					</view>
					<view class="info">
						{{ medicines.remark }}
					</view>
					<multi-media-view :resourceUrls="medicines.image | resourceUrlFilter" class="multi-media-view"></multi-media-view>
				</view>
			</view>
		</view>
		<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']">
			<u-form-item label="喂药时间" prop="eventTime">
				<u-input v-model="form.eventTime" type="select" placeholder="请选择时间" @click="timeShow1 = true" />
			</u-form-item>
			<u-form-item label="喂药说明" prop="nursingMeasures">
				<u-input v-model="form.nursingMeasures" />
			</u-form-item>
			<u-form-item label="喂药照片">
				<x-upload
					ref="uUpload"
					:form-data="formData"
					@onUploaded="onUploaded"
					:hasVideo="false"
				/>
			</u-form-item>
		</u-form>
		<u-button class="action-view" @click="saveClick">保存</u-button>
		<u-picker v-model="timeShow1" mode="time" :params="params" @confirm="confirmTime1"></u-picker>
	</view>
</template>

<script>
	import {
		addRecordMedication,
		getRecordHandover
	} from '@/api/record.js'
	import {
		formatDateByTimestamp
	} from '@/utils/utils.js'
	import recordMixin from './mixins/index.js'
	import XUpload from '@/components/x-upload'
	import MultiMediaView from '@/components/multi-media-view.vue'
	export default {
		mixins: [recordMixin],
		components: {
			XUpload,
			MultiMediaView
		},
		filters: {
			resourceUrlFilter (value) {
				if (!value) {
					return []
				}
				return value.split('|');
			}
		},
		data() {
			return {
				form: {
					eventTime: formatDateByTimestamp(Date.now(), 'yyyy/mm/dd hh:MM:ss'),
					nursingMeasures: '',
				},
				rules: {
					eventTime: [{
						required: true,
						message: '请选择入睡时间',
					}, ],
					nursingMeasures: [{
						required: true,
						message: '请选择睡眠质量',
					}, ],
				},

				timeShow1: false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false,
					timestamp: true
				},
				
				item: {},
				
				formData: {
					'bizType': 'record-handover'
				},
			}
		},
		methods: {
			addRecord() {
				this.$refs.uUpload.upload();
			},

			confirmTime1(res) {
				console.log(res);
				this.form.sleepTime = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd hh:MM:ss');
			},

			getRecord() {
				console.log(this.recordId)
				if (this.$u.test.isEmpty(this.recordId)) {
					return;
				}
				uni.showLoading({})
				const params = {
					id: this.recordId,
					childId: this.defaultChildren.id
				}
				getRecordHandover(params).then(res => {
					console.log(res)
					uni.hideLoading()
					this.item = res.data
				})
			},
			
			onUploaded(data) {
				this.form.photos = data.resourceUrl;
				this.form.mediaType = 1; 
				
				let childIds = '';
				for (let index in this.childrenList) {
					let item = this.childrenList[index];
					childIds += `,${item.id}`;
				}
				if (childIds.length > 0) {
					childIds = childIds.substring(1);
				}
				this.form.childIds = childIds
				addRecordMedication(this.form).then(res => {
					this.$u.toast('添加成功');
					setTimeout(function(){
						uni.navigateBack({delta:1})
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss" scoped>
	@import '@/css/u-form.scss';
	
	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.children-view {
		width: 10rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
	}
	
	.item{
		display: flex;
		flex-direction: column;
		// padding: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
		background-color: #fff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		border: 1rpx solid $app-divider-color;
		.top{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		
		.line{
			background-color: $app-divider-color;
			height: 2rpx;
			width: 100%;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}
	}
</style>
